<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<title>滴答办公系统-员工列表</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="/media/layui/css/layui.css" media="all">
<script src="/media/js/jquery.min.js"></script>
	<script>
		function changeFlag(id,type) {
			var type = $(type).text();
			// alert(type)
			if (confirm("确定要"+type+"吗？")){
				var flag = type=="启用"?1:0;
				// alert(id
				$.getJSON("/Emp_updateFlag","id="+id+"&flag="+flag,function (result) {
					if (result){
						$("#a_"+id).parent().prev().prev().text(type);
						$("#a_"+id).text(flag==1?'禁用':'启用');
						if(flag==1){
							//背景颜色变化
							//            移除样式                                    添加样式
							$("#a_" + id).removeClass("layui-btn layui-btn-mini").addClass("layui-btn layui-btn-danger layui-btn-mini");
						}else{
							//背景颜色变化
							$("#a_" + id).removeClass("layui-btn layui-btn-danger layui-btn-mini").addClass("layui-btn layui-btn-mini");
						}
					}
				})
			}
		}
	</script>
</head>
<body>
	<div class="layui-container">
		<table class="layui-table" id="tbdata" lay-filter="tbop">
			<thead>
				<tr>
					<td>序号</td>
					<td>工号</td>
					<td>姓名</td>
					<td>部门</td>
					<td>性别</td>
					<td>手机号</td>
					<td>QQ号</td>
					<td>邮箱</td>
					<td>状态</td>
					<td>入职日期</td>
					<td>操作</td>
				</tr>
			</thead>
			<tbody>
				<tr th:id="|tr_${num.id}|" th:each="num:${emputils.recods}" >
					<td th:text="${num.id}">1</td>
					<td th:text="${num.no}">34567</td>
					<td th:text="${num.name}">张三</td>
					<td th:text="${num.departname}">教学部</td>
					<td th:text="${num.sex}">男</td>
					<td th:text="${num.phone}">13345678999</td>
					<td th:text="${num.qq}">1378999</td>
					<td th:text="${num.email}">zhangsan@qq.com</td>
					<td th:text="${num.flag}==1?'启用':'禁用'"></td>
					<td th:text="${num.createdate}">2018-10-10</td>
					<td>
<!--						<a class="layui-btn layui-btn-mini" href="empupdate.html">启用</a>-->
						<a class="layui-btn layui-btn-mini" href="#" th:id="|a_${num.id}|" th:onclick="|changeFlag(${num.id},this)|" th:if="${num.flag==0}" th:text="${num.flag}==0?'启用':'禁用'">禁用</a>
						<a class="layui-btn layui-btn-danger layui-btn-mini" href="#" th:id="|a_${num.id}|" th:onclick="|changeFlag(${num.id},this)|" th:if="${num.flag==1}" lay-event="del" th:text="${num.flag}==0?'启用':'禁用'">启用</a>

						<a class="layui-btn layui-btn-mini" href="empupdate.html">编辑</a>
						<a class="layui-btn layui-btn-danger layui-btn-mini"
						lay-event="del" onclick="deleteCourse();">删除</a></td>
				</tr>
			</tbody>
		</table>
		<div class="layui-box layui-laypage layui-laypage-default" id="layui-laypage-1">
						   <a href="javascript:;" class="layui-laypage-prev layui-disabled" data-page="0">
							    <i class="layui-icon">&lt;</i>
						   </a> 
							    <span style="color:#009688;font-weight: bold;">1</span> 
							    <a href="#">2</a> 
							    <a href="#">3</a>  
							    <a href="#">4</a> 
							    <a href="#">5</a> 
							<a href="javascript:;" class="layui-laypage-next layui-disabled" data-page="2"> 
							    <i class="layui-icon">&gt;</i>
							</a> 
							<span class="layui-laypage-skip">到第
							   <input type="text" min="1" value="1" class="layui-input">页
								<button type="button" class="layui-laypage-btn">确定</button>
							</span> 
							<span class="layui-laypage-count">共 1 条</span> 
							<span class="layui-laypage-limits"> 
							    <select lay-ignore="">
							        <option value="10" selected="">10 条/页</option>
									<option value="20">20 条/页</option>
									<option value="30">30 条/页</option>
									<option value="40">40 条/页</option>
									<option value="50">50 条/页</option>
									<option value="60">60 条/页</option>
									<option value="70">70 条/页</option>
									<option value="80">80 条/页</option>
									<option value="90">90 条/页</option>
							</select>
							</span>
						</div>
	</div>
	
	<script src="media/layui/layui.js"></script>
	
	<script type="text/javascript">
	   function deleteCourse(){
		   layui.use('table', function() {
			   layer.confirm('是否确认删除员工?',function(index) {
				   layer.msg("删除成功", {icon : 6});
				   layer.msg("删除失败", {icon : 5});
			   });
		   });
	   }
	</script>

</body>
</html>